﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>


<div class="materialContainer">
    <form id="login_form" method="POST">
        <div class="box">
            <div class="title">登录</div>
            <div class="input">
                <label for="name">用户名</label>
                <input type="text" name="username" id="name">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="pass">密码</label>
                <input type="password" name="password" id="pass">
                <span class="spin"></span>
            </div>
            <div class="button login">
                <button id="blogLogin" type="button">
                    <span>博客登录</span>
                    <i class="fa fa-check"></i>
                </button>
            </div>
            <div class="button login">
                <button id="backLogin" type="button">
                    <span>后台登录</span>
                    <i class="fa fa-check"></i>
                </button>
            </div>
            <a href="javascript:" class="pass-forgot">忘记密码？</a>
        </div>
    </form>

    <form id="register_form" action="/register.do" method="POST">
        <div class="overbox">
            <div class="material-button alt-2">
                <span class="shape"></span>
            </div>
            <div class="title">注册</div>
            <div class="input">
                <label for="register_username">用户名</label>
                <input type="text" name="register_username" id="register_username">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="register_password">密码</label>
                <input type="password" name="register_password" id="register_password">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="check_password">确认密码</label>
                <input type="password" name="check_password" id="check_password">
                <span class="spin"></span>
            </div>
            <div id="register_btn" class="button">
                <button type="button">
                    <span>注册</span>
                </button>
            </div>
        </div>
    </form>

</div>

<script src="js/jquery-3.6.0.js"></script>
<script src="js/index.js"></script>

</body>
</html>

<script>
    //这块js代码用来验证用户两次输入的密码是否一致，如果一致，就提交表单，如果不一致，就产生一个提示框，刷新页面
    $("#register_btn").click(function () {
        if ($("#register_password").val() == "" || $("#check_password").val() == "" || $("#register_username") == "") {
            alert("对不起，您有输入为空，请重新注册！！！！");
            window.location.href = "/index.html";
        } else {
            if ($("#register_password").val() != $("#check_password").val()) {
                alert("对不起，您两次输入的密码不一致，请重新注册！！！！");
                window.location.href = "/index.html";
            } else {
                $("#register_form").submit();
            }
        }
    })

    //当点击博客登录的时候，修改form表单的地址为/login.do?type=0,当点击后台登录的时候，修改表单提交的地址为/login.do?type=1
    $("#blogLogin").click(function () {
        $("#login_form").attr("action", "/login.do?type=0").submit();
    });
    $("#backLogin").click(function () {
        $("#login_form").attr("action", "/login.do?type=1").submit();
    })
</script>
